<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>俄罗斯方块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #f0f0f0;
            touch-action: none;
        }

        #gameCanvas {
            border: 2px solid #333;
            margin-top: 20px;
        }

        .controls {
            margin-top: 20px;
            display: flex;
            gap: 20px;
        }

        .btn {
            padding: 15px 25px;
            font-size: 18px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            touch-action: manipulation;
        }

        .score {
            margin-top: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="score">分数: <span id="scoreText">0</span></div>
    <canvas id="gameCanvas"></canvas>
    <div class="controls">
        <button class="btn" id="leftBtn">←</button>
        <button class="btn" id="rightBtn">→</button>
        <button class="btn" id="rotateBtn">旋转</button>
        <button class="btn" id="downBtn">↓</button>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreText = document.getElementById('scoreText');

        // 设置画布大小
        const blockSize = 30;
        const cols = 10;
        const rows = 20;
        canvas.width = cols * blockSize;
        canvas.height = rows * blockSize;

        // 定义方块形状
        const shapes = [
            [[1, 1, 1, 1]], // I
            [[1, 1], [1, 1]], // O
            [[1, 1, 1], [0, 1, 0]], // T
            [[1, 1, 1], [1, 0, 0]], // L
            [[1, 1, 1], [0, 0, 1]], // J
            [[1, 1, 0], [0, 1, 1]], // S
            [[0, 1, 1], [1, 1, 0]]  // Z
        ];

        const colors = ['#00f0f0', '#f0f000', '#a000f0', '#f0a000', '#0000f0', '#00f000', '#f00000'];

        let board = Array(rows).fill().map(() => Array(cols).fill(0));
        let score = 0;
        let currentPiece = null;
        let currentPieceX = 0;
        let currentPieceY = 0;
        let currentPieceColor = '';

        function createNewPiece() {
            const randomIndex = Math.floor(Math.random() * shapes.length);
            currentPiece = shapes[randomIndex];
            currentPieceColor = colors[randomIndex];
            currentPieceX = Math.floor((cols - currentPiece[0].length) / 2);
            currentPieceY = 0;
        }

        function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * blockSize, y * blockSize, blockSize - 1, blockSize - 1);
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制已固定的方块
            for (let y = 0; y < rows; y++) {
                for (let x = 0; x < cols; x++) {
                    if (board[y][x]) {
                        drawBlock(x, y, board[y][x]);
                    }
                }
            }

            // 绘制当前方块
            if (currentPiece) {
                for (let y = 0; y < currentPiece.length; y++) {
                    for (let x = 0; x < currentPiece[y].length; x++) {
                        if (currentPiece[y][x]) {
                            drawBlock(currentPieceX + x, currentPieceY + y, currentPieceColor);
                        }
                    }
                }
            }
        }

        function isCollision(pieceX, pieceY, piece) {
            for (let y = 0; y < piece.length; y++) {
                for (let x = 0; x < piece[y].length; x++) {
                    if (piece[y][x]) {
                        const newX = pieceX + x;
                        const newY = pieceY + y;
                        if (newX < 0 || newX >= cols || newY >= rows || 
                            (newY >= 0 && board[newY][newX])) {
                            return true;
                        }
                    }
                }
            }
            return false;
        }

        function rotatePiece() {
            const newPiece = currentPiece[0].map((_, i) => 
                currentPiece.map(row => row[i]).reverse()
            );
            
            if (!isCollision(currentPieceX, currentPieceY, newPiece)) {
                currentPiece = newPiece;
            }
        }

        function clearLines() {
            let linesCleared = 0;
            for (let y = rows - 1; y >= 0; y--) {
                if (board[y].every(cell => cell)) {
                    board.splice(y, 1);
                    board.unshift(Array(cols).fill(0));
                    linesCleared++;
                    y++;
                }
            }
            if (linesCleared > 0) {
                score += linesCleared * 100;
                scoreText.textContent = score;
            }
        }

        function mergePiece() {
            for (let y = 0; y < currentPiece.length; y++) {
                for (let x = 0; x < currentPiece[y].length; x++) {
                    if (currentPiece[y][x]) {
                        board[currentPieceY + y][currentPieceX + x] = currentPieceColor;
                    }
                }
            }
            clearLines();
            createNewPiece();
            if (isCollision(currentPieceX, currentPieceY, currentPiece)) {
                alert('游戏结束！得分：' + score);
                resetGame();
            }
        }

        function moveDown() {
            if (!isCollision(currentPieceX, currentPieceY + 1, currentPiece)) {
                currentPieceY++;
            } else {
                mergePiece();
            }
        }

        function moveLeft() {
            if (!isCollision(currentPieceX - 1, currentPieceY, currentPiece)) {
                currentPieceX--;
            }
        }

        function moveRight() {
            if (!isCollision(currentPieceX + 1, currentPieceY, currentPiece)) {
                currentPieceX++;
            }
        }

        function resetGame() {
            board = Array(rows).fill().map(() => Array(cols).fill(0));
            score = 0;
            scoreText.textContent = score;
            createNewPiece();
        }

        // 控制按钮事件
        document.getElementById('leftBtn').addEventListener('touchstart', (e) => {
            e.preventDefault();
            moveLeft();
        });

        document.getElementById('rightBtn').addEventListener('touchstart', (e) => {
            e.preventDefault();
            moveRight();
        });

        document.getElementById('rotateBtn').addEventListener('touchstart', (e) => {
            e.preventDefault();
            rotatePiece();
        });

        document.getElementById('downBtn').addEventListener('touchstart', (e) => {
            e.preventDefault();
            moveDown();
        });

        // 键盘控制
        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowLeft':
                    moveLeft();
                    break;
                case 'ArrowRight':
                    moveRight();
                    break;
                case 'ArrowDown':
                    moveDown();
                    break;
                case 'ArrowUp':
                    rotatePiece();
                    break;
            }
        });

        // 游戏循环
        function gameLoop() {
            moveDown();
            draw();
        }

        // 开始游戏
        resetGame();
        setInterval(gameLoop, 1000);
        draw();
    </script>
</body>
</html>
